<template>
  <NavBar class="detail_nav">
    <template #left>
      <img src="~@/assets/images/common/back.svg" alt="" @click="back" />
    </template>
    <template #center>
      <div class="title">
        <div
          v-for="(item, index) of titles"
          :key="index"
          :class="{ active: curIdx === index }"
          @click="toggle(index)"
        >
          {{ item }}
        </div>
      </div>
    </template>
  </NavBar>
</template>

<script>
import NavBar from '@/components/common/NavBar'

export default {
  name: 'DetailNavBar',
  components: {
    NavBar
  },
  data () {
    return {
      titles: ['商品', '参数', '评论', '推荐'],
      curIdx: 0 // 当前索引
    }
  },
  methods: {
    toggle (index) {
      this.curIdx = index
    },
    back () {
      this.$router.back()
    }
  }
}
</script>

<style lang="scss" scoped>
.detail_nav {
  img {
    margin-top: 12px;
  }

  .title {
    display: flex;
    font-size: 14px;

    div {
      flex: 1;

      &.active {
        color: $--color-high-text;
      }
    }
  }
}
</style>
